<template>
	<view style="overflow: hidden;">
		<canvas id="canvas" style="width:325px;height:185px;position: fixed;top: -10000px;" type="2d" class="canvas" />
		<!-- <canvas id="canvas" style="width:325px;height:185px;" type="2d" class="canvas" /> -->
		<u-button text="生成图片" type="primary" @click="createCanvasImage"></u-button>
		<image :src="img" mode="" width=""></image>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	// 请求图片的时候用promise处理了下，通过Promise.all处理请求多个图片，响应成功后绘制图片+文字
	export default {
		data() {
			return {
				img: '',
				canvas: null
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onReady() {
			this.createCanvasImage()
		},
		methods: {
			async getImage(url) {
				if (!url) {
					return null
				}
				const off = wx.createOffscreenCanvas({
					type: "2d",
				});
				const image = off.createImage();
				await new Promise((resolve, reject) => {
					image.onload = resolve; // 绘制图片逻辑
					image.src = url;
				});
				return image;
			},
			// 生成图片
			async createCanvasImage() {
				uni.showLoading({

				})
				let userInfo = this.userInfo;
				let that = this;
				wx.createSelectorQuery().select("#canvas")
					.fields({
						node: true,
						size: true,
					})
					.exec((res) => {
						// 这里是canvas的宽高
						console.log(res[0].width, res[0].height);
						// Canvas 对象
						const canvas = res[0].node;
						that.canvas = canvas;
						// Canvas 画布的实际绘制宽高
						const width = res[0].width;
						const height = res[0].height;

						// 创建canvas渲染上下文
						const ctx = canvas.getContext("2d");
						const dpr = wx.getWindowInfo().pixelRatio;
						console.log("---dpr", dpr);
						// 手动改变canvas的宽和高
						canvas.width = width * dpr;
						canvas.height = height * dpr;
						ctx.scale(dpr, dpr);
						// 以上代码都是基础工作
						let bg = that.getImage(
							`https://file.casugn.com/storecompcard//j2cdfSjh0tjr2fb3404d4bb50a596d3cccfef16df01c_1688348589302.png`
						);
						let wxCodeImg = that.getImage(userInfo.head);
						let headImg = that.getImage(userInfo.head);
						//多张图片封装进入队列转为同步渲染
						let promiseList = [bg, headImg];
						if (userInfo.wxCodeImg) {
							promiseList = [bg, headImg, wxCodeImg];
						}
						Promise.all(promiseList).then((result) => {
							console.log(res);
							ctx.drawImage(result[0], 0, 0, 325, 185);
							if (userInfo.wxCodeImg) {
								ctx.drawImage(result[2], 260, 10, 50, 50);
							}
							ctx.save();
							ctx.beginPath(); //开始绘制
							let avatarurl_width = 106, //绘制的头像宽度
								avatarurl_heigth = 106, //绘制的头像高度
								avatarurl_x = 28, //绘制的头像在画布上的位置
								avatarurl_y = 50; //绘制的头像在画布上的位置
							//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
							ctx.arc(
								avatarurl_width / 2 + avatarurl_x,
								avatarurl_heigth / 2 + avatarurl_y,
								avatarurl_width / 2,
								0,
								Math.PI * 2,
								false
							);
							ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
							ctx.drawImage(
								result[1],
								avatarurl_x,
								avatarurl_y,
								avatarurl_width,
								avatarurl_heigth
							);
							ctx.restore();
							ctx.fillStyle = "#fff";
							ctx.font = `15px serif`;
							ctx.fillText(userInfo.name, 183, 74); // 绘制文字
							ctx.font = `10px serif`;
							ctx.fillText(userInfo.position, 183, 88); // 绘制文字
							ctx.font = `8px serif`;
							ctx.fillText(userInfo.company, 183, 113); // 绘制文字
							ctx.font = `8px serif`;
							ctx.fillText(userInfo.mobile, 183, 130); // 绘制文字
							ctx.font = `8px serif`;
							ctx.fillText(userInfo.wechat, 183, 148); // 绘制文字
							ctx.font = `8px serif`;
							ctx.fillText(userInfo.mail, 183, 164); // 绘制文字
							ctx.font = `8px serif`;
							if (userInfo.wxCodeImg) {
								ctx.fillText("截图扫码", 270, 70); // 绘制文字
							}
							ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
							wx.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: 325,
								height: 185,
								canvas: that.canvas, // canvas实例对象
								destWidth: 1300,
								destHeight: 740,
								success(res) {
									that.img = res.tempFilePath
									console.log(res.tempFilePath, "canvasToTempFilePath");
									uni.hideLoading()
								},
							});
						});
					});
			}
		}
	}
</script>

<style>
</style>